<template>
  <div style="height: 100%;">
    <!--导航栏-->
    <circle-header :title="circleDetail.wcName">
      <a slot="right-y"  class="more-icon-y iconfont icon-sousuo" @click="search()"></a>
    </circle-header>
      <!--标题内容-->
    <div style="padding-top: 56px;display: flex;flex-direction: column;height: calc(100% - 56px)">
      <div class="title-background-container" :style="{backgroundImage:'url('+ appUrl + circleDetail.wcBackgroundImagePath + ')'}">
        <van-image class="title-image" :src="appUrl + circleDetail.wcIconPath"></van-image>
        <span ref="descBox" class="title-desc">{{circleDetail.wcDesc}}</span>
        <span class="more-desc" v-if="moreDescSwitch" @click="openMoreDesc">{{$t('circle300')}}></span>
        <div class="title-add-icon" v-if="circleDetail.wcCurrentUserRole === 'VISITOR'" @click="addCircle()"/>
        <div v-else class="title-add-icon" :class="{'addCircleIng': circleDetail.wcCurrentUserRole !== 'VISITOR'}" @click="exitCircle()">
<!--           <i class="iconfont icontuichu1"></i>-->
<!--           <span>{{$t('circle297')}}</span>-->
        </div>
      </div>
      <div style="flex: 1; height: 100px;">
        <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
          <van-list
              v-model="isLoading"
              :finished="finished"
              :finished-text="(finished&&total>0)? $t('no_more') : ''"
              loding-text="loading"
              @load="getCircleNews"
              >
                <!--推荐位-->
                <div v-if="circleBanner.length > 0">
                  <div class="recommend-container">
                    <p></p>
                    <div class="slide-box">
                      <div class="slide-item" :style="{background:'url('+ appUrl + item.wcrImage + ') center no-repeat', backgroundSize: 'auto 100%'}"  v-for="(item,index) in circleBanner" :key="index" @click="clickBanner(item)">
                        <div class="masking">
                          <span>{{item.wcrTitle}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!--功能宫格-->
                <div class="grid-container">
                  <van-grid clickable :column-num="3" :icon-size="53" :border="false">
                    <van-grid-item  :icon="icon.knowledgeIcon" :text="$t('circle260')" :to="{path: `/circle/knowledge/list/${circleId}`}" />
                    <van-grid-item  :icon="icon.topicIcon" :text="$t('circle259')" :to="{path: '/circle/topic/list',query:{circleId}}" />
                    <van-grid-item  :icon="icon.pictureIcon" :text="$t('circle261')" :to="{path: `/circle/photo/photoList/${circleId}`}" />
                    <van-grid-item  :icon="icon.voteIcon" :text="$t('circle253')" :to="{path: '/circle/vote',query:{circleId}}" />
                    <van-grid-item  :icon="icon.cativeIcon" :text="$t('circle262')" :to="{path: `/circle/activity/${circleId}`}" />
                    <van-grid-item  :icon="icon.memberIcon" :text="$t('circle263')" :to="{path: '/circle/personnel',query:{circleId}}" />
                  </van-grid>
                </div>
                <div v-if="circleDetail.wcCurrentUserRole === 'GZLEADER' || circleDetail.wcCurrentUserRole === 'MANAGER'" class="notice-container">
                  <div class="notice">
                    <i class="iconfont icon-gonggao"></i>
                    <span>{{$t('circle299')}}</span>
                  </div>
                </div>
                <!--最新动态-->
                <div class="msg-container">
                  <p>{{$t('circle_recent_news')}}</p>
                  <template v-if="circleNews.length>0">
                    <div v-for="(i,index) in circleNews" :key="index" class="msg-item-container" @click="toDetail(i)">
                      <van-image class="msg-img" round :src="appUrl + i.authorImage"></van-image>
                      <div class="msg-desc">
                        <div class="desc-content">
                          <span>{{i.authorName}} </span>
                          <span class="type">{{checkType(i.wcdType)}}</span>
                          <span v-html="$xss(i.wcdSourceName)"></span>
                        </div>
                        <span>{{i.wcdCreateDatetime}}</span>
                      </div>
                    </div>
                  </template>
                  <!--暂无数据-->
                  <div v-if="!isLoading && total === 0" style="height:100%;">
                      <div class="box-table" style="width:100%;height:100%;">
                          <div class="box-table-cell" style="text-align: center;">
                              <div class="no-data">
                                  <img src="../../../static/images/no-data.png" alt=""/>
                                  <p class="color999">{{ $t("no_data") }}</p>
                              </div>
                          </div>
                      </div>
                  </div>
                </div>
                <common-loading :isLoading="isLoading"></common-loading>
          </van-list>
        </van-pull-refresh>
      </div>
      </div>
    </div>
</template>

<script>
import CircleHeader from '@/repeatComponents/circleHeader/CircleHeader';
import {Image, Grid, GridItem, Dialog, Toast} from 'vant';
import knowledgeIcon from '../../../static/images/circle/knowledge.png';
import cativeIcon from '../../../static/images/circle/cative.png';
import memberIcon from '../../../static/images/circle/member.png';
import pictureIcon from '../../../static/images/circle/picture.png';
import topicIcon from '../../../static/images/circle/topic.png';
import voteIcon from '../../../static/images/circle/vote.png';

export default {
    name: 'Detail',
    components: {
        CircleHeader,
        [Image.name]: Image,
        [Grid.name]: Grid,
        [GridItem.name]: GridItem,
        [Dialog.Component.name]: Dialog.Component,
        vanToast: Toast
    },
    data() {
        return {
            circleId: this.$route.query.circleId,
            circleDetail: {},
            circleBanner: [],
            circleNews: [],
            pageNo: 1,
            total: 0,
            totalPage: 1,
            isLoading: false,
            moreDescSwitch: false,
            desc: '',
            // 采用base64路径加载图片
            icon: {
                knowledgeIcon,
                cativeIcon,
                memberIcon,
                pictureIcon,
                topicIcon,
                voteIcon
            },
            finished: false,
            isRefresh: false
        };
    },
    computed: {
        checkType() {
            return function(type) {
                let wcrType = '';
                switch (type) {
                case 'ATLAS':
                    wcrType = this.$t('circle229');
                    break;
                case 'TOPIC':
                    wcrType = this.$t('circle228');
                    break;
                case 'ACTIVITY':
                    wcrType = this.$t('circle232');
                    break;
                case 'PICTURE':
                    wcrType = this.$t('circle230');
                    break;
                case 'KNOWLEDGE':
                    wcrType = this.$t('circle227');
                    break;
                case 'VOTING':
                    wcrType = this.$t('circle231');
                    break;
                default:
                    wcrType = '';
                }
                return wcrType;
            };
        }
    },
    mounted() {
        this.getCircleDetail();
        this.getCircleBanner();
        this.getCircleNews('refresh');
        this.$store.commit('setCircleId', this.circleId);
        this.desc = this.$refs.descBox;
        this.showDetailBtnFun();
        window.addEventListener('resize', this.showDetailBtnFun);
    },
    methods: {
        /*获取工作圈详情*/
        getCircleDetail() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/work-circle/${this.circleId}`
            }).then(res => {
                this.circleDetail = res.data;
                this.$store.commit('setCircleRole', res.data.wcCurrentUserRole);
            }).catch(err => {
                Dialog.alert({
                    width: '180px',
                    confirmButtonText: this.$t('mall_10'),
                    confirmButtonColor: '#00aeef',
                    message: err.response.data.errorMsg || err.response.data.errMsg
                });
                setTimeout(() => this.$router.back(), 1000);
            });
        },
        /*获取工作圈banner*/
        getCircleBanner() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/work-circle/recommend/${this.circleId}`
            }).then(res => {
                this.circleBanner = res.data;
            });
        },
        /*获取工作圈最新动态*/
        getCircleNews(option) {
            this.isLoading = true;
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/work-circle/dynamic/${this.circleId}`,
                params: {
                    pageNo: this.pageNo
                }
            }).then(res => {
                this.totalPage = res.data.totalPage;
                this.total = res.data.totalRecord;
                if (option && option === 'refresh') {
                    this.circleNews = res.data.results;
                } else {
                    if (res.data.results) {
                        this.circleNews = [...this.circleNews, ...res.data.results];
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.circleNews.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getCircleNews('refresh');
                this.isRefresh = false;
            }, 900);
        },
        showDetailBtnFun() {
            this.$nextTick(() => {
                this.desc = this.$refs.descBox;
                this.moreDescSwitch = this.desc.clientHeight < this.desc.scrollHeight;
            });
        },
        //跳转搜索
        search() { // 跳转到搜索页面
            this.$router.push({path: '/circle/search', query: {votId: this.circleId}});
        },
        // 打开更多详情
        openMoreDesc() {
            Dialog.alert({
                width: '250px',
                confirmButtonText: this.$t('mall_10'),
                confirmButtonColor: '#00aeef',
                message: this.circleDetail.wcDesc
            });
        },
        //加入工作圈
        addCircle() {
            this.$axios({
                method: 'POST',
                url: `/app/api/trainee/work-circle/member/${this.circleId}`
            }).then(() => {
                this.circleDetail.wcCurrentUserRole = 'MEMBER';
                this.$store.commit('setCircleRole', 'MEMBER');
                Dialog.alert({
                    width: '180px',
                    confirmButtonColor: '#00aeef',
                    confirmButtonText: this.$t('mall_10'),
                    message: this.$t('circle288')
                });
            }).catch(err => {
                Dialog.alert({
                    width: '180px',
                    confirmButtonText: this.$t('mall_10'),
                    confirmButtonColor: '#00aeef',
                    message: err.response.data.errorMsg || err.response.data.errMsg
                });
            });
        },
        clickBanner(item) {
            this.$router.push({path: '/circle/banner/iframe', query: {url: item.wcrUrl}});
        },
        toDetail(item) {
            if (this.circleDetail.wcCurrentUserRole === 'VISITOR') {
                Toast({message: this.$t('circle225'), forbidClick: true});
                return false;
            }
            switch (item.wcdType) {
            case 'TOPIC':
                this.$router.push({path: '/circle/topic/detail', query: {id: item.wcdSourceId, circleId: item.wcdWcId}});
                break;
            case 'KNOWLEDGE':
                // this.$router.push({path: '/circle/knowledge/knowledgeDetail', query: {wctId: item.wcdSourceId}});
                this.$router.push({path: `/circle/knowledge/knowledgeInfo/${item.wcdSourceId}/${item.knowledgeType}`});
                break;
            case 'ATLAS' : //图册
                this.$router.push({path: `/circle/photo/photoList/${item.wcdWcId}`});
                break;
            case 'ACTIVITY' : //活动
                this.$router.push({path: `/circle/activityDetail/${item.wcdSourceId}`});
                break;
            case 'PICTURE' : //图片
                item.wcaWcId = item.wcdSourceId;
                item.wcaId = item.wcdWcId;
                this.$router.push({path: `/circle/photo/photoDetail`, query: item});
                break;
            case 'VOTING': //投票
                this.$router.push({path: '/circle/vote/detail', query: {votId: item.wcdSourceId}});
                break;
            default:
                break;
            }
        },
        exitCircle() {
            this.$axios({
                method: 'DELETE',
                url: `/app/api/trainee/work-circle/member/${this.circleId}`
            }).then(() => {
                this.circleDetail.wcCurrentUserRole = 'VISITOR';
                this.$store.commit('setCircleRole', 'VISITOR');
                Dialog.alert({
                    width: '180px',
                    confirmButtonText: this.$t('mall_10'),
                    confirmButtonColor: '#00aeef',
                    message: this.$t('circle298')
                });
            }).catch(err => {
                Dialog.alert({
                    width: '180px',
                    confirmButtonText: this.$t('mall_10'),
                    confirmButtonColor: '#00aeef',
                    message: err.response.data.errorMsg || err.response.data.errMsg
                });
            });
        }
    }
};
</script>

<style scoped lang="less">
    .addCircleIng {
        transform:rotate(45deg);
        -webkit-transform:rotate(45deg);
        -moz-transform:rotate(45deg);
        transition: 0.5s;
    }
  /deep/.swiper-slide{
    flex-shrink: 0
  }
  /deep/.van-grid-item__icon+.van-grid-item__text {
    margin-top: 12px;
  }
 .title-background-container{
   display: flex;
   position: relative;
   height: 97px;
   width: 100%;
   background-color: #00aeef;
   .title-image{
     margin: 17px 0 20px 15px;
     width: 60px;
     height: 60px;
   }
   .title-desc{
     margin: 21px 21px 0 16px;
     font-size: 10px;
     color: #FFFFFF;
     width: 70%;
     height: 40%;
     line-height: 14px;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
   }
   .title-exit-icon{
     background-color: #eee;
     display: flex;
     position: absolute;
     right: 19px;
     bottom: 5px;
     width: 50px;
     height: 22px;
     border-radius: 3px;
     z-index: 5;
     padding-left: 12px;
     padding-right: 6px;
     padding-top: 5px;
     >span{
       font-size: 12px;
       margin-left: 4px;
       line-height: 20px
     }
   }
   .more-desc{
     position: absolute;
     top:65px;
     color: #ccc;
     line-height: 15px;
     font-size: 10px;
     left: 90px;
   }
   .title-add-icon{
     position: absolute;
     right: 19px;
     bottom: -15px;
     width: 46px;
     height: 46px;
     background: #075ebb;
     border-radius: 50%;
     z-index: 5;
     transition: 0.5s;
   }
   .title-add-icon::before{
     content: '';
     position: absolute;
     left: 50%;
     top: 48%;
     width: 22px;
     color: #FFFFFF;
     margin-left: -11px;
     margin-top: 0;
     border-top: 2.5px solid;
   }
   .title-add-icon::after {
     content: '';
     position: absolute;
     left: 50%;
     color: #FFFFFF;
     top: 48%;
     height: 22px;
     margin-left: -1px;
     margin-top: -10px;
     border-left: 2.5px solid;
   }
 }
  .recommend-container{
    width: 100%;
    padding-left: 15px;
    padding-right: 10px;
    height: 129px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .slide-box{
      display: -webkit-box;
      overflow-x: scroll;
      width: 98%;
      height: 80%;
      -webkit-overflow-scrolling:touch;
      &::-webkit-scrollbar { /**chrome、safari */
        display: none;
      }
      scrollbar-width: none; /**火狐 */
      -ms-overflow-style: none; /**IE10+ */
      .slide-item{
        width: 30%;
        height: 90%;
        margin-right: 3%;
        margin-bottom: 10px;
        position: relative;
        .masking{
          position: absolute;
          height: 100%;
          width: 100%;
          top:0;
          left: 0;
          background: rgba(35, 24, 21, 0.2);
          display: flex;
          justify-content: center;
          align-items: center;
          span{
            color: #fff;
          }
        }
      }
    }
    .items{
      width: 100%;
      height: 84px;
      background-color: #00aeef;
    }
    >p{
      font-size: 12px;
      margin: 11px 0;
      color: #666666;
    }
  }
  .grid-container{
    margin-top: 10px;
    width: 100%;
  }
  .msg-container{
    margin-top: 10px;
    padding: 15px;
    background-color: #fff;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    >p{
      font-size: 12px;
      margin: 11px 0;
      color: #666666;
    }
    .msg-item-container{
      display: flex;
      padding-bottom: 10px;
      .msg-img{
        height: 40px;
        width: 40px;
        flex-shrink: 0;
      }
      .msg-desc{
        display: flex;
        width: 100%;
        flex-direction: column;
        padding-left: 20px;
        padding-top: 10px;
        .desc-content{
          width: 90%;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          .type{
            padding: 0 5px;
            white-space: nowrap;
          }
          span{
            font-size: 12px;
            color: #666666;
          }
        }
        >span{
          font-size: 12px;
          color: #999999;
          padding-top: 12px;
        }
      }
    }
  }
  .more-icon-y{
    font-size: 22px;
    // padding: 18px 20px 0 0;
    color: #666 !important;
  }
  .notice-container{
    height: max-content;
    width: 100%;
    padding: 10px 16px 0 16px;
    box-sizing: border-box;
    .notice{
      display: flex;
      // width: 86%;
      background-color: #fff;
      padding: 5px 8px;
      border-radius: 10px;
      >i{
        color: #00aeef;
        margin-right: 10px;
      }
      >span{
        font-size: 12px;
        color: #ccc;
        line-height: 20px;
      }
    }
  }
</style>
